<template>
  <div>
    <div class="box">
      <h3>属性规格</h3>
      <el-button @click="add" class="el-icon-plus btn" type="primary"
        >添加</el-button
      >
      <el-table :data="list" style="width: 100%">
        <el-table-column label="#" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="属性名称" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="规格" width="380">
          <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              <el-tag
                class="tab"
                v-for="item in scope.row.specs"
                :key="item.id"
                size="medium"
                >{{ item.name }}</el-tag
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button
              class="el-icon-edit"
              @click="
                $router.push({
                  name: 'SellerGoods_attrsFrom',
                  query: {
                    id: scope.row.id,
                  },
                })
              "
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[2, 4, 5, 6]"
        :page-size="per_page"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tot"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { guige } from "../../api/api";
export default {
  components: {},
  data() {
    return {
      page: 1,
      per_page: 6,
      list: [],
      tot: 0,
    };
  },
  mounted() {},
  created() {
    this.feng();
  },
  methods: {
    // 封装请求数据函数
    feng() {
      guige({
        page: this.page,
        per_page: this.per_page,
      }).then((res) => {
        this.list = res.data.data.data;
        this.tot = res.data.data.total;
      });
    },
    // 点击页面分页
    handleSizeChange(val) {
      this.per_page = val;
      this.feng();
    },
    // 每页分多少条
    handleCurrentChange(size) {
      this.page = size;
      this.feng();
    },
    // 添加
    add() {
      this.$router.push({ name: "SellerGoods_attrsFrom" });
    },
  },
  computed: {},
  watch: {},
};
</script>
<style scoped>
.box {
  width: 1450px;
  height: 700px;
  background: #fff;
}
h3 {
  float: left;
  margin: 20px;
}
.btn {
  float: left;
  margin-top: 80px;
  margin-left: -100px;
}
.tab {
  margin-left: 20px;
}
</style>